<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>小程序开发月刊第一期（20190114） | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/157.7708d1da.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序原理</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序开发技巧</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>小程序开发月刊</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html" aria-current="page" class="active sidebar-link">小程序开发月刊第一期（20190114）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#开发者工具" class="sidebar-link">开发者工具</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#使用-tips" class="sidebar-link">使用 Tips</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#最新踩坑-tips" class="sidebar-link">最新踩坑 Tips</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#框架" class="sidebar-link">框架</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#工具" class="sidebar-link">工具</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#图表" class="sidebar-link">图表</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190114.html#ui-库" class="sidebar-link">UI 库</a></li></ul></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190215.html" class="sidebar-link">小程序开发月刊第二期（20190215）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190315.html" class="sidebar-link">小程序开发月刊第三期（20190315）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190415.html" class="sidebar-link">小程序开发月刊第四期（20190415）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190515.html" class="sidebar-link">小程序开发月刊第五期（20190515）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190617.html" class="sidebar-link">小程序开发月刊第六期（20190617）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190715.html" class="sidebar-link">小程序开发月刊第七期（20190715）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190815.html" class="sidebar-link">小程序开发月刊第八期（20190815）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190916.html" class="sidebar-link">小程序开发月刊第九期（20190916）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20191015.html" class="sidebar-link">小程序开发月刊第十期（20191015）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20191115.html" class="sidebar-link">小程序开发月刊第11期（20191115）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20191216.html" class="sidebar-link">小程序开发月刊第12期（20191216）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20200214.html" class="sidebar-link">小程序开发月刊第13期（20200214）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20200314.html" class="sidebar-link">小程序开发月刊第14期（20200314）</a></li><li><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20200415.html" class="sidebar-link">小程序开发月刊第15期（20200415）</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>小程序的一些能力更新、踩坑历史、以及一些开源工具库和框架的推荐记录第一弹。</p> <h1 id="小程序-latest"><a href="#小程序-latest" class="header-anchor">#</a> 小程序 latest</h1> <h2 id="开发者工具"><a href="#开发者工具" class="header-anchor">#</a> 开发者工具</h2> <ul><li><a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/settings.html" target="_blank" rel="noopener noreferrer">新增黑色主题<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/edit.html#typescript-%E6%94%AF%E6%8C%81" target="_blank" rel="noopener noreferrer">支持 Typescript<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h1 id="小程序教程"><a href="#小程序教程" class="header-anchor">#</a> 小程序教程</h1> <h2 id="使用-tips"><a href="#使用-tips" class="header-anchor">#</a> 使用 Tips</h2> <ul><li><a href="/front-end-playground/wxapp-technique/wxapp-official-functions.html">超实用小程序官方能力</a></li></ul> <blockquote><p>目前来说，大多数是我自己的文章，也非常欢迎大家推荐文章来~</p></blockquote> <h2 id="最新踩坑-tips"><a href="#最新踩坑-tips" class="header-anchor">#</a> 最新踩坑 Tips</h2> <ol><li><p>调试小程序时，有些请求例如上传文件请求，无法再控制台里查看到完整的请求信息。
解决办法：小程序开发工具可以设置网络代理，转发到抓包工具例如 Charles 中即可。</p></li> <li><p>在原生页跳转进入小程序场景下（仿原生，没有关闭和后退按钮），有没有内部能力从小程序返回到原生页？
可使用<a href="https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBackMiniProgram.html?search-key=navigateBackMiniProgram" target="_blank" rel="noopener noreferrer">navigateBackMiniProgram<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功</p> <blockquote><p>虽然写的是返回小程序，但是他就是可以用。算是实现的有 bug，目前测试没遇到过不行的情况。
iOS 仿原生点了是切后台，安卓仿原生是关闭，这个无解。
想安心一点就用<code>&lt;navigator target=&quot;miniProgram&quot; open-type=&quot;exit&quot;&gt;</code>，版本比较高</p></blockquote></li> <li><p>小程序右上角的关闭按钮，只是将小程序切换到后台并不会关闭小程序。若需要重新加载，需要在微信首页下拉删掉使用过的小程序；另从后台唤醒时，会触发<code>onShow</code>而不是<code>onLoad</code>。</p></li> <li><p>如果用户通过微信首页下拉删掉使用过的小程序，那么小程序代码里面通过 localStorage 保存的缓存信息以及通过文件管理器保存的文件都会被清掉。</p></li> <li><p>小程序工具上传代码，勾选 ES6 转 ES5，只会针对 ES6 进行编译，对 ES7/ES8 代码并不会编译，可能导致兼容性问题（如<code>Object.values</code>）。
节后工具会上线一个 ES6+ 转 ES5 的能力，一站式全部处理掉。</p></li></ol> <blockquote><p>后续踩坑相关的，可能会整理到一个地方一起沉淀吧~~~</p></blockquote> <h1 id="tools"><a href="#tools" class="header-anchor">#</a> tools</h1> <h2 id="框架"><a href="#框架" class="header-anchor">#</a> 框架</h2> <blockquote><p>Tips 仅供参考: 小程序开发本身就比较方便，个人感觉最好的方式建议直接使用原生开发噢</p></blockquote> <h3 id="wepy"><a href="#wepy" class="header-anchor">#</a> wepy</h3> <ul><li>Github: <a href="https://github.com/Tencent/wepy" target="_blank" rel="noopener noreferrer">https://github.com/Tencent/wepy<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="mpvue"><a href="#mpvue" class="header-anchor">#</a> mpvue</h3> <ul><li>Github: <a href="https://github.com/mpvue" target="_blank" rel="noopener noreferrer">https://github.com/mpvue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="工具"><a href="#工具" class="header-anchor">#</a> 工具</h2> <h3 id="werequest"><a href="#werequest" class="header-anchor">#</a> weRequest</h3> <p>解决繁琐的小程序会话管理，一款自带登录态管理的网络请求组件：</p> <ul><li><p>session 登录态管理（静默续期）</p></li> <li><p>cache 请求缓存能力</p></li> <li><p>封装请求测速能力</p></li> <li><p>Github: <a href="https://github.com/IvinWu/weRequest" target="_blank" rel="noopener noreferrer">https://github.com/IvinWu/weRequest<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ul> <h3 id="we-cropper"><a href="#we-cropper" class="header-anchor">#</a> we-cropper</h3> <p>微信小程序图片裁剪工具。</p> <ul><li>Github: <a href="https://github.com/we-plugin/we-cropper" target="_blank" rel="noopener noreferrer">https://github.com/we-plugin/we-cropper<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="westore"><a href="#westore" class="header-anchor">#</a> westore</h3> <p>微信小程序状态管理解决方案</p> <ul><li>Github: <a href="https://github.com/Tencent/westore" target="_blank" rel="noopener noreferrer">https://github.com/Tencent/westore<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <blockquote><p>Tips: store 为全局状态，不同组件或页面需要注意数据隔离</p></blockquote> <h2 id="图表"><a href="#图表" class="header-anchor">#</a> 图表</h2> <h3 id="echarts-for-weixin"><a href="#echarts-for-weixin" class="header-anchor">#</a> echarts-for-weixin</h3> <p>ECharts 的微信小程序版本</p> <ul><li>Github: <a href="https://github.com/ecomfe/echarts-for-weixin" target="_blank" rel="noopener noreferrer">https://github.com/ecomfe/echarts-for-weixin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <blockquote><p>注意：移动端中使用 ECharts，折线图的点击事件体验会很差</p></blockquote> <h3 id="wx-f2"><a href="#wx-f2" class="header-anchor">#</a> wx-f2</h3> <p>F2 的微信小程序图表示例</p> <ul><li>Github: <a href="https://github.com/antvis/wx-f2" target="_blank" rel="noopener noreferrer">https://github.com/antvis/wx-f2<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="wx-charts"><a href="#wx-charts" class="header-anchor">#</a> wx-charts</h3> <p>微信小程序图表 charts 组件</p> <ul><li>Github: <a href="https://github.com/xiaolin3303/wx-charts" target="_blank" rel="noopener noreferrer">https://github.com/xiaolin3303/wx-charts<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <blockquote><p>该图表组件已没有维护，但是源码比较简单清晰，可自定义修改</p></blockquote> <h2 id="ui-库"><a href="#ui-库" class="header-anchor">#</a> UI 库</h2> <h3 id="weui-小程序"><a href="#weui-小程序" class="header-anchor">#</a> weui-小程序</h3> <ul><li>Github: <a href="https://github.com/Tencent/weui-wxss" target="_blank" rel="noopener noreferrer">https://github.com/Tencent/weui-wxss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="wux-weapp"><a href="#wux-weapp" class="header-anchor">#</a> wux-weapp</h3> <ul><li>Github: <a href="https://github.com/wux-weapp/wux-weapp" target="_blank" rel="noopener noreferrer">https://github.com/wux-weapp/wux-weapp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <blockquote><p>Tips: 表单相关的 input/textarea 稍微有毒，其他暂可正常使用</p></blockquote> <h1 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h1> <p>本期作为第一期，所以把目前的一些工具库和文章沉淀一并发出，大家如果有很好的文章、工具推荐，可以一起留言讨论和推荐。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/wxapp/wxapp-latest/wxapp-latest-20190114.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/wxapp/wxapp-technique/wxapp-navigate.html" class="prev">
          小程序奇技淫巧之页面跳转管理
        </a></span> <span class="next"><a href="/front-end-playground/wxapp/wxapp-latest/wxapp-latest-20190215.html">
          小程序开发月刊第二期（20190215）
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-4270" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/157.7708d1da.js" defer></script>
  </body>
</html>
